<template>
  <el-dialog
    v-model="isOpen"
    title="添加收货地址"
    width="30%"
    :close="close"
    :before-close="close"
  >
    <el-form
      label-width="70px"
      style="padding: 10px;"
    >
      <el-form-item label="收货人">
        <el-input v-model="cacheData.consignee"></el-input>
      </el-form-item>
      <el-form-item label="所在地区">
        <elui-china-area-dht
          :leave="3"
          @change="handleChange"
          placeholder="选择地区"
        ></elui-china-area-dht>
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input v-model="cacheData.address"></el-input>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="cacheData.phone"></el-input>
      </el-form-item>
      <el-form-item label="地址别名">
        <el-input v-model="cacheData.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          color="#3271ae"
          @click="doUpdateAddress"
        >保存收货地址</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
  
  <script>
import { EluiChinaAreaDht } from "elui-china-area-dht";
const chinaData = new EluiChinaAreaDht.ChinaArea().chinaAreaflat;

import { updateAddress } from "@/api/address";

export default {
  components: {
    EluiChinaAreaDht,
  },
  props: {
    isOpenUpdate: Boolean,
    addressData: Object,
  },
  watch: {
    isOpenUpdate: {
      handler(newValue, oldValue) {
        this.isOpen = this.isOpenUpdate;
        this.deepCloneFrom();
      },
      deep: true,
    },
  },
  data() {
    return {
      isOpen: false,
      cacheData: {},
    };
  },
  methods: {
    close() {
      this.$emit("closeDialog");
    },

    doUpdateAddress() {
      updateAddress(this.cacheData).then((res) => {
        this.deepCloneTo();
        this.close();
      });
    },

    deepCloneTo() {
      for (let key in this.addressData) {
        this.addressData[key] = this.cacheData[key];
      }
    },
    deepCloneFrom() {
      for (let key in this.addressData) {
        this.cacheData[key] = this.addressData[key];
      }
    },

    handleChange(e) {
      const one = chinaData[e[0]];
      const two = chinaData[e[1]];
      const three = chinaData[e[2]];
      this.cacheData.area = one.label + two.label + three.label;
    },
  },
};
</script>
  
  <style scoped>
</style>